<template>
  <div class="container">
    <el-form label-position="left" label-width="90px">
      <el-form-item label="账号" required>
        <el-input v-model="account" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" required>
        <el-input v-model="password" type="password" clearable @keyup.enter="login"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

let account = ref('')
let password = ref('')
let loading = ref(false)

const login = () => {
  loading.value = true
  if (account.value === 'admin' && password.value === '123123') {
    setTimeout(() => {
      router.push({ name: 'Home' })
      loading.value = false
    }, 1500);
  } else {
    loading.value = false
    ElMessage.error('账号密码错误, 请重新输入')
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
